<template>
  <uni-card class="card" v-for="item in orderData" :key="item.id">
    <template v-slot:title>
      <view class="card-header">
        <view class="left">
          <image :src="item.shop.icon" mode="scaleToFill" />
        </view>
        <view class="center">{{ item.shop.name }}</view>
        <view class="right" :style="{ color: item.status === 2 ? '#B10D0C' : 'gray' }">{{ statusList[item.status] }}
        </view>
      </view>
    </template>
    <view class="content">
      <view v-for="(obj, index) in item.data" :key="index">{{ obj.filedName + ' ： ' + obj.filedValue }}</view>
    </view>
    <view class="time">提交时间：{{ item.createTime }}</view>
    <view class="btns" v-if="hasMore && (status == 0 || status == 1)">
      <button v-if="status == 0" @click="handleOrder(item, 0)">接单</button>
      <button @click="handleOrder(item, 1)">转交</button>
      <button v-if="status == 1" @click="handleOrder(item, 2)">完成</button>
    </view>
  </uni-card>
  <view class="noContent" v-if="!orderData.length">
    <template v-if="successType">
      <view class="title">恭喜你</view>
      <view>你的订单已经全部完成！！！</view>
    </template>
    <view v-else class="title">暂无订单</view>
  </view>
</template>

<script setup>
import { transfer, accept, finish } from '@/api/order.js'
const emit = defineEmits(['on-success'])
defineProps({
  orderData: {
    type: Array,
    default: () => []
  },
  successType: {
    type: Boolean,
    default: false
  },
  hasMore: {
    type: Boolean,
    default: false
  },
  status: {
    type: Number,
    default: 0
  }
})
const statusList = ['待处理', '处理中', '已完成', '已移交']

const handleOrder = (item, flag) => {
  [accept, transfer, finish][flag]({
    id: item.id
  }).then(() => {
    uni.showToast({
      title: '成功',
      icon: 'success',
      success: setTimeout(() => {
        emit('on-success')
      }, 1000)
    })
  })
}
</script>

<style lang="scss" scoped>
::v-deep .uni-card {
  border-radius: 20rpx !important;
}

.card {
  .card-header {
    // height: 100rpx;
    display: flex;
    align-items: center;
    padding: 0 25rpx;
    border-bottom: 1px #ebeef5 solid;

    .left {
      width: 50rpx;
      height: 50rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .center {
      margin-left: 30rpx;
      font-size: 42rpx;
      flex: 1;
    }

    .right {
      color: #B10D0C;
    }
  }

  .content {
    color: #000;
    min-height: 200rpx;
    font-size: 42rpx;
    line-height: 65rpx;
  }

  .btns {
    display: flex;
    justify-content: flex-end;

    button {
      width: fit-content;
      height: 58rpx;
      background: $brand-theme-color;
      border-radius: 20rpx;
      color: #fff;
      line-height: 58rpx;
      margin: 0;

      &:last-child {
        margin-left: 30rpx;
      }
    }
  }
}

.noContent {
  height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .title {
    font-size: 48rpx;
    margin-bottom: 20rpx;
  }
}
</style>